<template>
    <div>
         <el-breadcrumb separator="/">
            <el-breadcrumb-item >业务办理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/index/business/ask' }">请假申请</el-breadcrumb-item>
        </el-breadcrumb>
        
        <div v-if="form">
                <el-col class="margintop20">
                <el-steps :active="active" finish-status="success" align-center>
                        <el-step title="步骤 1" description="填写信息"></el-step>
                        <el-step title="步骤 2" description="休假原因"></el-step>
                        <el-step title="步骤 3" description="请假申请"></el-step>
                    </el-steps>
                </el-col>

            <el-col class="margintop20">
                <div v-show="active==1" style="width:35%">
                    <el-form 
                    :model="form" 
                    :rules="rules"
                    ref="form" 
                    label-width="100px"
                    label-position="right" 
                    class="form">
                    <el-form-item label="姓名" prop="username">
                        <el-input v-model="form.username" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="原因" prop="category" class="demonstration">
                        <el-cascader
                            v-model="form.category"
                            :options="options"
                            @change="handleChange">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="gonext" type="warning" size="small">下一步</el-button>
                    </el-form-item>
                    </el-form>
                    
                </div>
                <div v-show="active==2" >
                    <div class="blck">
                         <el-date-picker
                            v-model="form.time1"
                            type="date"
                            placeholder="选择日期">
                            </el-date-picker>
                            <i>—</i>
                            <el-date-picker
                            v-model="form.time2"
                            type="date"
                            placeholder="选择日期">
                            </el-date-picker>
                    </div>
                    
                    <quill-editor 
                        v-model="form.desc" 
                        ref="advisecontent" 
                        :options="editorOption" 
                        @blur="onEditorBlur($event)" 
                        @focus="onEditorFocus($event)"
                        @change="onEditorChange($event)">
                    </quill-editor>
                    <div class="btn">
                        <el-button @click="active--" type="primary" size="small">上一步</el-button>
                        <el-button @click="next" type="warning" size="small">下一步</el-button>
                    </div>            
                </div>
                <div v-show="active==3">
                    <div class="btn">
                        <el-button @click="active--" type="primary" size="small">上一步</el-button>
                         <el-button  type="success" size="small" @click="addtosome">申请</el-button>
                    </div>   
                </div> 
            </el-col>
        </div>
    </div>
</template>


<script>
import {leaveupdate,find} from "@/api"
import {advacecatetory} from "@/utils"
export default {
    mounted(){
        find()
        .then(res=>{
            console.log(res)
            this.list = res.result
            this.form = res.result[res.result.length-1]
            console.log(this.form)
        })
    },
   data(){
       return {
        list:[],
        flag:false,
        tlag:null,
        active:1,
        editorOption:{},
        form: {
            show:false,
            mobile:localStorage.getItem("mobile"),
            username:sessionStorage.getItem("username")
        },
        options:advacecatetory,
        rules:{
            username:[
                {required:true,message:"请输入名字",trigger:"blur"},
            ],
            category:[
                {required:true,message:"请选择原因类别",trigger:"blur"}
            ],
        }
       }
   },
   methods:{
       gogo(){
           this.$router.push({name:"mine"})
       },
       gonext(){
           this.$refs.form.validate(valid=>{
               if(valid){
                    this.active++
               }
           })
       },
       next(){
           this.active++
       },
       addtosome(){
           leaveupdate(this.form)
           .then(res=>{
               if(res.type){
                  this.$router.push({name:"ask"})
               }
           })
       },
       handleChange(){

       },
       onEditorBlur(){

       },
        onEditorChange(){

       },
        onEditorFocus(){

       },
        onSubmit() {
            this.$refs.form.validate(valid=>{
                if(valid){
                    
                }else{
                    return false
                }
            })
      }
   }
}
</script>

<style lang="scss" scoped >
    ::v-deep .el-input__inner{
        width: 200px;
    }
    .blck{
        margin: 20px auto;
    }
    ::v-deep .ql-editor{
    width: 300px !important;
     height: 200px !important;
    }
    .aaa{

        margin: 200px 500px;
        color: orange;
        span{
            font-size: 30px;
        }
    }
   ::v-deep .el-button{
       margin-top: 10px;
        margin-left: 20px;
    }
</style>